﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>编辑线面图层</title>
	 <meta http-equiv="X-UA-Compatible" content="IE=8;text/html;charset=utf-8" />
<script type="text/javascript" src="lib/ChrhcMap.Include.js"></script>
    <script type="text/javascript">
        var baseMap, eyeMap;
		var cMap;
		var entityAdded=false;
		var entityLayer ;
		var _LineLayer;
        function InitMap() {
		var option={ 
			mapId:"mapDiv",
			mapWidth:800,
			mapHeight:800,
			showCenter:true,
			callBack:setMap//地图初始化完毕后执行的方法
			};
		   cMap = new ChrhcMap(option);
		
		
        }
		function setMap(map){
			baseMap = map;
			//AppendTestEntitys();
			  
		}
		
		var coordsArr = [
		'10536,14528.5,10608,14590.5,11646,14466.5,10590,14468.5,10504,14276.5,10536,14528.5',
		'10636,14728.5,10608,14890.5,11656,14466.5,10590,14568.5,10544,14276.5,10636,14728.5',
		'10536,14528.5,10658,14590.5,11946,14466.5,10590,14868.5,10504,14876.5,10536,14528.5'
		];//收尾相接是面]
		var drawLayer = null;
		function draw(type){
			if(type=="1"){
				cMap.setCenter(9046,8938);
					var option = {
						map:cMap,
						layerName:"画图",
						layerType:"Vector",
						editEvent:{onStop:editCompleteEvent,onDragStick:onDragCompleteEvent},
						event:{onClick:clickEvent,onMouseOver:onmouseover},
						dataSource:[
									{
									name:"测试1",
									id:"1",
									coords : '8024,8156,7704,8526,7884,8968,8742,9138,9046,8938,8986,8262,8144,7958',//收尾不相接是线
									style:{
										Size:5, //线条大小
										Color:'#ff3300',
										Opacity:0.5,//透明度（0-1之间的小数
										Dashstyle:"dot" //线段样式(IE下有效)，可用：solid|dot|dash|dashdot|longdash|longdashdot|longdashdotdot|shortdot|shortdash|shortdashdot|shortdashdotdot
									}
									
									},
									{
									name:"测试2",
									id:"2",
									coords : '7588,7970,8294,8568,9104,9112',//收尾不相接是线
									style:{
										Size:4, //线条大小
										Color:'#ff3300',
										Opacity:0.8,//透明度（0-1之间的小数
										Dashstyle:"dash" 
									}
									},
									
									{
									name:"测试3",
									id:"3",
									coords :'8828,7954,7534,8754,7794,9192,9194,8138,8828,7954',// coordsArr[index],//收尾相接是面
									style:{
										Size:5,
										FillColor:'#ff3300',
										Strokecolor:'#ff8300',
										Opacity:0.4,
										Dashstyle:"longdash"//线段样式(IE下有效)，可用：solid|dot|dash|dashdot|longdash|longdashdot|longdashdotdot|shortdot|shortdash|shortdashdot|shortdashdotd
									}
									}
							]
						}
					
					drawLayer = new ChrhcMap.Layer(option);
			}
		}
		var lastShapeId;
		function clickEvent(e){
			//alert("当前是自定义点击事件"+e.name);
			//e.removeNode();
			alert("当前选择的对象是"+e.name+" ID:"+e.id);
			lastShapeId = e.id;
			/*
			此处自定义选择某个对象后触发的相关事件，比如说：根据ID进行查询
			*/
		}
		function onmouseover(e){
			//alert("当前是自定义鼠标经过事件"+e.name);
		}
		function editCompleteEvent(e1,e2){
			alert("自定义编辑结束事件"+e1.GetCoords());
		}
		function onDragCompleteEvent(id,name,coords){
			alert("自定义编辑结束事件,当前ID为："+id+",坐标串为："+coords);
			/*
			在此处自定义编辑某个对象结束后，对数据库的更新
			*/
		}
		function editLayer(state){
			drawLayer.enableEdit(state);
		}
		function changeColor(){
			var style = {
				//Color:"#FF9900",
				FillColor:"#ff3300",
				Opacity:0.4,
				Size:5,
				StrokeColor:"#ff8300"
			};
			var lastShapeId ="3";
			drawLayer.reSetDrawStyle(lastShapeId,style);
		}
    </script>

</head>
<body style="margin: 0" onload="InitMap();">
<div id="mapDiv" />
 <div id="tool" style="position: absolute; top: 10px; left: 10px; background: #fff;font-size: 12px;">
        
		<span style="cursor: pointer; margin-left: 5px;" onclick="draw('1');">加载数据</span>
		<span style="cursor: pointer; margin-left: 5px;" onclick="editLayer(true);">开始编辑</span>
		<span style="cursor: pointer; margin-left: 5px;" onclick="editLayer(false);">停止编辑</span>
		<span style="cursor: pointer; margin-left: 5px;" onclick="changeColor();">更改ID为3的颜色</span>
		
	 </div>
</body>

</html>
